<template>
	<uni-datetime-picker 
		v-model="computedValue"
		:type="type"
		:modelValue="modelValue"
		:start="start"
		:end="end"
		:returnType="returnType"
		:placeholder="placeholder"
		:startPlaceholder="startPlaceholder"
		:endPlaceholder="endPlaceholder"
		:rangeSeparator="rangeSeparator"
		:border="border"
		:disabled="disabled"
		:clearIcon="clearIcon"
		:hideSecon="hideSecond"
		@maskClick="maskClick">
		<slot></slot>
	</uni-datetime-picker>
</template>

<script>
  import dayjs from "@/common/dayjs.min.js"
	export default {
		/**
     * DatetimePicker 时间选择器
     * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
     * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
     * @property {String} type 选择器类型
     * @property {String|Number|Array|Date} value 绑定值
     * @property {String} placeholder 单选择时的占位内容
     * @property {String} start 起始时间
     * @property {String} end 终止时间
     * @property {String} start-placeholder 范围选择时开始日期的占位内容
     * @property {String} end-placeholder 范围选择时结束日期的占位内容
     * @property {String} range-separator 选择范围时的分隔符
     * @property {Boolean} border = [true|false] 是否有边框
     * @property {Boolean} disabled = [true|false] 是否禁用
     * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
     * @event {Function} change 确定日期时触发的事件
     * @event {Function} show 打开弹出层
     * @event {Function} close 关闭弹出层
     * @event {Function} clear 清除上次选中的状态和值
     **/
		props: {
			type: {
				type: String,
				default: 'datetime'
			},
			value: {
				type: [String, Number, Array, Date],
				default: ''
			},
			modelValue: {
				type: [String, Number, Array, Date],
				default: ''
			},
			start: {
				type: [Number, String],
				default: ''
			},
			end: {
				type: [Number, String],
				default: ''
			},
			returnType: {
				type: String,
				default: 'string'
			},
			placeholder: {
				type: String,
				default: ''
			},
			startPlaceholder: {
				type: String,
				default: ''
			},
			endPlaceholder: {
				type: String,
				default: ''
			},
			rangeSeparator: {
				type: String,
				default: '-'
			},
			border: {
				type: [Boolean],
				default: true
			},
			disabled: {
				type: [Boolean],
				default: false
			},
			clearIcon: {
				type: [Boolean],
				default: true
			},
			hideSecond: {
				type: [Boolean],
				default: false
			},
			valueFormat: {
				type: String,
				default: ''
			}
		},
    options: {
			virtualHost: true
		},
		data() {
			return {
			};
		},
		computed: {
      computedValue: {
        set(val) {
          // dateTime 模式下，没有选择时分秒
          if (this.type == 'datetime' && (val.endsWith(' ') || val.indexOf(' ') == -1)){
            // 填充当前时分秒
            val += dayjs().format('HH:mm:ss')
            if (this.start){
              // 小于最小值则为最小值
              const overStart = dayjs(val).isBefore(this.start);
              if (overStart) val = this.start
            }
            if (this.end){
              // 大于最大值则为最大值
              const overEnd = dayjs(val).isAfter(this.end);
              if (overEnd) val = this.end;
            }
          }
					if (this.valueFormat){
						val = dayjs(val).format(this.valueFormat)
					}
          this.$emit("input", val);
          this.$emit("change", val);
        },
        get() {
          return this.value;
        }
      }
		},
		methods: {
      maskClick() {
        this.$emit('maskClick')
      },
      dateEndTimeChange(value) {
				this.$nextTick(() => {
					// 计算长度不为19填充时分秒
					if (value.length != 19) {
						value = dayjs(value).format('YYYY-MM-DD HH:mm:00')
					}
					// 小于最小值则为最小值
					const overStart = dayjs(value).isBefore(this.form.startTime);
					if (overStart) {
						value = this.form.startTime;
					}
					// 大于最大值则为最大值
					const overEnd = dayjs(this.form.endTime).isBefore(value);
					if (overEnd) {
						value = this.form.endTime;
					}
					this.$set(this.form, 'replaceTime', value);
				})
			},
		},
	}
</script>